//首页Js文件


// 轮播图实现

/**
 * 初始化swiper
 */
function initSwiper() {
    new Swiper('.swiper', {
        autoplay: true, //可选选项，自动滑动
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}
// 网络请求轮播数据
function loadSwiper() {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let swiperList = data.resultInfo.list
            showSwiper(swiperList)
        }
    }).catch(err => {
        alert('11')
    })
}
// 动态渲染轮播图  进入页面的时候就是轮播图
function toIndex() {
    loadSwiper()
}

function showSwiper(swiperList) {
    let swiperStr = swiperList.map(item => {
        return `
        <div class="swiper-slide">
                   <img src="${item.url}" alt="${item.content}">
               </div>
        `
    }).join('')

    let str = `
    <div class="swiper fl clearfix">
    <div class="swiper-wrapper"> 
    ` + swiperStr + `
     </div> 
  <div class="swiper-pagination"></div> 
  <div class="swiper-button-prev"></div> 
  <div class="swiper-button-next"></div>
  </div>`
   
    $('.banner').html(str)
    // 实例化轮播图
    initSwiper()
}

//网络请求商品数据
let pageNo = 1
let moreProStr = ''

function loadProductList(pageNo) {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        params: {
            pageSize: 8,
            pageNo,
        }
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let productList = data.resultInfo.list
            showProductList(productList)
        }
    })
}
//动态加载商品列表
function showProductList(productList) {
    let proStr = productList.map(item => {
        //点击获取商品id
        return `
        <li onclick="toDetail(${item.id})">
        <img src="${item.picture}"
            alt="">
        <p>${item.shop}</p>
        <p class="clearfix">
            <span class="fl">淘宝</span>
            <span class="fr">包邮</span>
        </p>
        <p>
            <span>￥${item.price}</span>
            <span>${item.id}人已买</span>
            <span class="foodClass">甜点/面食</span>
        </p>
    </li>`
    }).join('')

    moreProStr += proStr
    $('#list ul').html(moreProStr)
}

// 加载更多操作
function reLoadMore() {
    //点击的时候 让pageNo++然后调用网络加载
    $('.loadMore').on('click', function () {
            ++pageNo
        if (pageNo == 6) {
            $('.loadMore').html('敬请期待')
        } else {

            loadProductList(pageNo)
        }

    })
}
//搜索接口
function search() {
    $('.go').on('click', function () {
        let text = $('input[name="search"]').val()
        axios({
            method: 'get',
            url: 'http://api.yuguoxy.com/api/shop/search',
            params: {
                keyword: text,
            }
        }).then(response => {
            let data = response.data
            if (data.resultCode == 1) {
                let searchList = data.resultInfo.list
                moreProStr = ''
                showProductList(searchList)
            }
        })
    })
}
//跳转到详情页
function toDetail(id) {
    location.href = '../pages/details.html?id=' + id
}

//点击的时候清空ul现有的数据重新渲染

//鼠标滑过列表栏出现详细分类

function productClass() {
    $('#main .class').on('mouseover', 'li:nth-child(1)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>女装</h2>
       T恤  衬衫  毛衣  针织 小背心  吊带  蕾丝衫  雪纺衫
          </li>
            <li>
            <h2>女鞋</h2>
            休闲鞋  运动鞋  淑女鞋  正装鞋 凉鞋  短面鞋  长脸鞋  靴子
            
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(2)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>男装</h2>
       质华达呢  纯毛花呢  啥味呢  纯棉  上等丝绸
          </li>
            <li>
            <h2>男鞋</h2>
            皮鞋  正装鞋  休闲鞋  运动鞋  跑鞋  舞蹈鞋
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(3)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>美妆</h2>
       护肤品  彩妆  香水  发用品  口腔护理  洗浴用品  美妆工具
          </li>
            <li>
            <h2>个护</h2>
            护肤乳液  乳膏  护发素  润唇膏洗面奶  面膜  洗发液  沐浴露  花露水
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(4)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>配饰</h2>
       项链  项坠  手镯  手链  脚链  戒指  指环  挂件
          </li>
            <li>
            <h2>箱包</h2>
            外交官  爱华仕  美旅  达派  皇冠  雅士
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(5)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>零食品牌</h2>
      三只松鼠  良品铺子  百草味  德芙  费列罗  李小姐与韩梅梅
          `
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(6)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>妈妈用品</h2>
       孕妇用品  孕妇装  孕妇保健品  孕妇营养品  怀孕指导书
          </li>
            <li>
            <h2>婴儿用品</h2>
            洗发  沐浴  香皂  奶瓶  水杯  训练杯  塑料玩具
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(7)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>手机数码</h2>
       华为  vivo  苹果 华硕  荣耀  中兴   oppo  
          </li>
            `
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(8)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>内衣</h2>
       支撑型  调整型  舒适型  家居服 睡衣  
          </li>
            <li>
            <h2>袜子</h2>
            短筒袜  船袜  隐形袜  中筒袜  长筒袜  丝袜
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('#main .class').on('mouseover', 'li:nth-child(8)', function () {
        $('.secondMenu').css({
            display: 'block'
        })
        let str = `<li>
       <h2>文娱</h2>
       儿童书籍  百科全书  外国史  人工智能  js高级编程  
          </li>
            <li>
            <h2>家居</h2>
            吸尘器  扫地机器人  电视机  沙发  洗碗机  洗地机
            </li>`
        $('#main .secondMenu').html(str)

    })

    $('body:not(.secondMenu)').on('click', function () {
        $('.secondMenu').css({
            display: 'none'
        })
    })
}


//发起9.9包邮分类页面的网络请求
function loadCatagory() {
    let initStr = `
    <ul class="fl leftBox"> </ul>
    <div class="fl rightBox">`
    $('.swiper').html(initStr)
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/category/list'
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let catagoryList = data.resultInfo.list
            tofreeShipping(catagoryList)
        }
    })
}
//9.9包邮分类的渲染
function tofreeShipping(list) {

    let str = list.map(item => {
        return `<li onclick="sendId(${item.id})">${item.name}</li>`
    }).join('')
    $('.leftBox').html(str)
    let rightStr = `<img src="http://localhost:3000/static/images/favor.webp" alt="">`
    $('.rightBox').html(rightStr)
}
//分类商品的类别id
function sendId(id) {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list/category',
        params: {
            categoryId: id,
            pageSize: 3,
            pageNo: 1
        }
    }).then(response => {
        let data = response.data
        if (data.resultCode == 1) {
            let classList = data.resultInfo.list
            showClassSwiper(classList)
        }
    })
}

//展示分类商品的轮播图
function showClassSwiper(swiperList) {
    let swiperStr = swiperList.map(item => {
        return `

        <div class="swiper fl clearfix">

        <div class="swiper-slide" onclick="toDetail(${item.id})">
                   <img src="${item.picture}" alt="${item.product}">
               </div>`
    }).join('')
    let str = `<div class="swiper-wrapper">` + swiperStr + `</div> 
                <div class="swiper-button-prev"></div> 
                <div class="swiper-button-next"></div>
                </div>`
    $('.rightBox').html(str)
    // 实例化轮播图
    initSwiper()
}

loadSwiper()
loadProductList(pageNo)
reLoadMore()
search()
productClass()